<template>
  <div class="form">
    <div class="form-title"><p>天王盖地虎</p></div>
    <div class="form-body">
      <el-form
        :model="enterpriseInfo"
        ref="enterpriseRegisterRef"
        :rules="enterpriseRegisterRules"
        label-width="125px"
        size="default"
        :inline="true"
      >
        <div
          style="
            font-size: 18px;
            color: #010101;
            font-weight: 520;
            margin: 0 0 10px 0px;
          "
        >
          <el-divider direction="vertical" />
          联系人信息
        </div>

        <el-form-item label="姓名:" class="form-context-item" prop="linkName">
          <el-input
            v-model="enterpriseInfo.linkName"
            style="width: 270px"
            placeholder="请输入联系人姓名"
          />
        </el-form-item>
        <el-form-item label="手机号:" prop="linkPhone">
          <el-input
            maxlength="11"
            v-model="enterpriseInfo.linkPhone"
            style="width: 270px"
            placeholder="请输入联系人手机号"
          />
        </el-form-item>
        <el-form-item label="身份证号码:" prop="linkId">
          <el-input
            v-model="enterpriseInfo.linkId"
            style="width: 270px"
            placeholder="请输入联系人身份证号码"
          />
        </el-form-item>
        <el-form-item label="身份证有效期:" prop="linkIdStartDate">
          <el-date-picker
            v-model="enterpriseInfo.linkIdStartDate"
            type="date"
            label="Pick a date"
            placeholder="请选择注册日"
            style="width: 130px"
            :disabled-date="startDate"
            key="001"
          />
          至<el-date-picker
            v-model="enterpriseInfo.linkIdFinshDate"
            type="date"
            label="Pick a date"
            placeholder="请选择到期日"
            style="width: 130px"
            :disabled-date="finshDate"
            key="002"
          />
        </el-form-item>
        <el-form-item label="身份证归属:" prop="linkIdBelogn">
          <el-radio-group v-model="enterpriseInfo.linkIdBelogn">
            <el-radio :label="'1'" class="radio-right">中国大陆</el-radio>
            <el-radio :label="'2'" class="radio-right">中国香港</el-radio>
            <el-radio :label="'3'" class="radio-right">中国台湾</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="邮箱:" prop="linkEmail">
          <el-input
            v-model="enterpriseInfo.linkEmail"
            style="width: 270px"
            placeholder="请输入联系人邮箱"
          />
        </el-form-item>
        <div
          style="
            font-size: 18px;
            color: #010101;
            font-weight: 500;
            margin: 10px 0 10px 0px;
          "
        >
          <el-divider direction="vertical" />
          法人信息
        </div>

        <el-form-item
          label="姓名:"
          class="form-context-item"
          prop="legalPersonName"
        >
          <el-input
            v-model="enterpriseInfo.legalPersonName"
            style="width: 270px"
            placeholder="请输入法人姓名"
          />
        </el-form-item>

        <el-form-item label="手机号:" prop="legalPersonPhone">
          <el-input
            maxlength="11"
            v-model="enterpriseInfo.legalPersonPhone"
            style="width: 270px"
            placeholder="请输入法人手机号"
          />
        </el-form-item>

        <el-form-item label="身份证号码:" prop="legalPersonId">
          <el-input
            v-model="enterpriseInfo.legalPersonId"
            style="width: 270px"
            placeholder="请输入法人身份证号码"
          />
        </el-form-item>
        <el-form-item label="身份证有效期:" prop="legalPersonStartDate">
          <el-date-picker
            v-model="enterpriseInfo.legalPersonStartDate"
            type="date"
            label="Pick a date"
            placeholder="请选择注册日"
            style="width: 130px"
            :disabled-date="startDate"
            key="003"
          />
          至<el-date-picker
            v-model="enterpriseInfo.legalPersonFinshDate"
            type="date"
            label="Pick a date"
            placeholder="请选择到期日"
            style="width: 130px"
            :disabled-date="finshDate"
            key="004"
          />
        </el-form-item>
        <el-form-item label="身份证归属:" prop="legalPersonBelogn">
          <el-radio-group v-model="enterpriseInfo.legalPersonBelogn">
            <el-radio :label="'1'" class="radio-right">中国大陆</el-radio>
            <el-radio :label="'2'" class="radio-right">中国香港</el-radio>
            <el-radio :label="'3'" class="radio-right">中国台湾</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="邮箱:" prop="legalPersonEmail">
          <el-input
            v-model="enterpriseInfo.legalPersonEmail"
            style="width: 270px"
            placeholder="请输入法人邮箱"
          />
        </el-form-item>

        <div
          style="
            font-size: 18px;
            color: #010101;
            font-weight: 500;
            margin: 10px 0 10px 0px;
          "
        >
          <el-divider direction="vertical" />
          企业信息
        </div>

         <div style="text-align: center">
          <div class="images">
            <Image @imageValue="blImage"></Image>
            <div class="imageDistance">
              <el-icon class="iconfont icon-bitian iconColor"></el-icon>
              <span>营业执照图片</span>
            </div>
          </div>
          <div class="images">
            <Image @imageValue="legalFaceImage"></Image>
            <div class="imageDistance">
              <el-icon class="iconfont icon-bitian iconColor"></el-icon>
              <span>法人身份证正面图片</span>
            </div>
          </div>
          <div class="images">
            <Image @imageValue="legalBackImage"></Image>
            <div class="imageDistance">
              <el-icon class="iconfont icon-bitian iconColor"></el-icon>
              <span>法人身份证反面图片</span>
            </div>
          </div>
          <div class="images">
            <Image @imageValue="linkFaceImage"></Image>
            <div class="imageDistance">
              <el-icon class="iconfont icon-bitian iconColor"></el-icon>
              <span>联系人身份证正面图片</span>
            </div>
          </div>
          <div class="images">
            <Image @imageValue="linkBackImage"></Image>
            <div class="imageDistance">
              <el-icon class="iconfont icon-bitian iconColor"></el-icon>
              <span>联系人身份证反面图片</span>
            </div>
          </div>
        </div> 

         <el-form-item label="营业执照注册日:" prop="BiStartDate">
          <el-date-picker
            v-model="enterpriseInfo.BiStartDate"
            type="date"
            label="Pick a date"
            placeholder="请选择营业执照注册日"
            style="width: 270px"
            :disabled-date="startDate"
            key="005"
          />
        </el-form-item>

        <el-form-item label="营业执照到期日:" prop="BiFinshDate">
          <el-date-picker
            v-model="enterpriseInfo.BiFinshDate"
            type="date"
            label="Pick a date"
            placeholder="请选择营业执照到期日"
            style="width: 270px"
            :disabled-date="finshDate"
            key="006"
          />
        </el-form-item>

        <el-form-item label="企业名称:" prop="enterpriseName">
          <el-input
            v-model="enterpriseInfo.enterpriseName"
            style="width: 270px"
            placeholder="请输入企业名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="注册地址:" prop="registeredAddress">
          <el-input
            v-model="enterpriseInfo.registeredAddress"
            style="width: 270px"
            placeholder="请输入注册地址"
          ></el-input>
        </el-form-item>

        <el-form-item label="企业营业执照号:" prop="enterpriseLicense">
          <el-input
            v-model="enterpriseInfo.enterpriseLicense"
            style="width: 270px"
            placeholder="请输入企业营业执照"
          ></el-input>
        </el-form-item>

        <el-form-item label="企业成立日期:" prop="enterpriseEstablishDate">
          <el-date-picker
            v-model="enterpriseInfo.enterpriseEstablishDate"
            style="width: 270px"
            placeholder="请选择企业成立日期"
            type="date"
            :disabled-date="startDate"
            key="007"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="企业类型:" prop="enterpriseType">
          <el-select
            v-model="enterpriseInfo.enterpriseType"
            class="select-border"
            style="width: 270px"
            clearable
            placeholder="请选择企业类型"
            size="default"
            :visible-change="visibleChange"
          >
            <el-option
              v-for="item in qiyeTypeSelect"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item> 

       <el-form-item label="企业规模:" prop="enterpriseSize">
          <el-select
            v-model="enterpriseInfo.enterpriseSize"
            class="m-2"
            style="width: 270px"
            clearable
            placeholder="请选择企业规模"
            size="default"
            :visible-change="visibleChange"
          >
            <el-option
              v-for="item in qiyeSizeSelect"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <div style="text-align: center">
          <el-button
            type="primary"
            class="submit"
            @click="enterpriseRegisterSubmit(enterpriseRegisterRef)"
            >提交</el-button
          >
        </div>
        <div style="text-align: center; margin-bottom: 40px">
          <el-checkbox  v-model="checkArgee" label="我已阅读并同意"  /><a
            target="_blank"
            style="color: #2b81e2"
            href="https://pic.cuohepai.com/zhongxin/%E4%BB%98%E6%AC%BE%E6%89%BF%E8%AF%BA%E5%87%BD.pdf"
            >《保证承诺书协议书》</a
          >
        </div> 
      </el-form>
    </div>
  </div>
</template>

<script>
import { ElMessage } from "element-plus";
import { reactive, toRefs } from "vue";
import { qiyeType, qiyeSize } from "../../select/enterpriseRegisterselect";
import { add } from "@/api/enterpriseRegister";
import Image from "@/components/img/image.vue";
export default {
  name: "enterpriseRegister",
  components: { Image },
  setup() {
    let data = reactive({
      checkArgee: false,
      enterpriseRegisterRef: "",
      qiyeTypeSelect: qiyeType,
      qiyeSizeSelect: qiyeSize,

      enterpriseInfo: {
        linkName: "", //联系人姓名
        linkId: "", //联系人身份证号码
        linkPhone: "", //联系人手机号
        linkIdBelogn: "", //联系人归属地
        linkEmail: "", //联系人邮箱
        linkIdStartDate: "", //联系人身份证注册日期
        linkIdFinshDate: "", //联系人身份证到期日期

        legalPersonName: "", //法人姓名
        legalPersonId: "", //法人身份证号码
        legalPersonPhone: "", //法人手机号
        legalPersonBelogn: "", //法人归属地
        legalPersonEmail: "", //法人邮箱
        legalPersonStartDate: "", //法人身份证有效日期
        legalPersonFinshDate: "", //法人身份证截止日期

        blPhoto: "", //营业执照图片
        legalFacePhoto: "", //法人身份证正面图片
        legalBackPhoto: "", //法人身份证反面图片
        linkFacePhoto: "", //联系人身份证正面图片
        linkBackPhoto: "", //联系人身份证反面图片

        BiStartDate: "", //营业执照有效日期
        BiFinshDate: "", //营业执照截止日期
        enterpriseName: "", //企业名称
        registeredAddress: "", //注册地址
        enterpriseLicense: "", //企业营业执照号
        enterpriseEstablishDate: "", //企业成立日期
        enterpriseType: "", //企业类型
        enterpriseSize: "", //企业规模
      },
      enterpriseRegisterRules: {
        linkName: [
          { required: true, message: "请输入联系人姓名", trigger: "blur" },
        ],
        linkId: [
          {
            required: true,
            message: "请输入联系人身份证号码",
            trigger: "blur",
          },
          {
            pattern:
              /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/,
            message: "联系人身份证号码格式不正确",
            trigger: "blur",
          },
        ],
        linkPhone: [
          { required: true, message: "请输入联系人手机号", trigger: "blur" },
          {
            pattern: /^1[34578]\d{9}$/,
            message: "联系人手机号码格式不正确",
            trigger: "blur",
          },
        ],
        linkIdBelogn: [
          { required: true, message: "请选择联系人归属地", trigger: "blur" },
        ],
        linkEmail: [
          { required: true, message: "请输入联系人邮箱", trigger: "blur" },
        ],
        linkIdStartDate: [
          { required: true, message: "请选择注册日", trigger: "blur" },
        ],
        // linkIdFinshDate: [
        //   { required: true, message: "请输入到期日", trigger: "blur" },
        // ],

        legalPersonName: [
          { required: true, message: "请输入法人姓名", trigger: "blur" },
        ],
        legalPersonId: [
          { required: true, message: "请输入法人身份证号码", trigger: "blur" },
          {
            pattern:
             /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/,
            message: "联系人身份证号码格式不正确",
            trigger: "blur",
          },
        ],
        legalPersonPhone: [
          { required: true, message: "请输入法人手机号", trigger: "blur" },
          {
            pattern: /^1[34578]\d{9}$/,
            message: "法人手机号码格式不正确",
            trigger: "blur",
          },
        ],
        legalPersonBelogn: [
          { required: true, message: "请输入法人归属地", trigger: "blur" },
        ],
        legalPersonEmail: [
          { required: true, message: "请输入法人邮箱", trigger: "blur" },
        ],
        legalPersonStartDate: [
          { required: true, message: "请选择注册日", trigger: "blur" },
        ],
        // legalPersonFinshDate: [
        //   { required: true, message: "请输入到期日", trigger: "blur" },
        // ],

        BiStartDate: [
          { required: true, message: "请选择营业执照注册日", trigger: "blur" },
        ],
        BiFinshDate: [
          { required: true, message: "请选择营业执照到期日", trigger: "blur" },
        ],
        enterpriseName: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
        ],
        registeredAddress: [
          { required: true, message: "请输入注册地址", trigger: "blur" },
        ],
        enterpriseLicense: [
          { required: true, message: "请输入企业营业执照号", trigger: "blur" },
        ],
        enterpriseEstablishDate: [
          { required: true, message: "请选择企业成立日期", trigger: "blur" },
        ],
        enterpriseType: [
          { required: true, message: "请输入企业类型", trigger: "blur" },
        ],
        enterpriseSize: [
          { required: true, message: "请输入企业规模", trigger: "blur" },
        ],
      },

      //只能选择今天之前的日期
    });

    //营业执照图片
    let blImage = (n) => {
      data.enterpriseInfo.blPhoto = n;
    };
    //法人身份证正面图片
    let legalFaceImage = (n) => {
      data.enterpriseInfo.legalFacePhoto = n;
    };
    //法人身份证反面图片
    let legalBackImage = (n) => {
      data.enterpriseInfo.legalBackPhoto = n;
    };
    //联系人身份证正面图片
    let linkFaceImage = (n) => {
     data.enterpriseInfo.linkFacePhoto = n;
    };
    //联系人身份证反面图片
    let linkBackImage = (n) => {
     data.enterpriseInfo.linkBackPhoto = n;
    };

    //个人注册必填项兜底校验
    // 提交按钮
    let enterpriseRegisterSubmit = async (formEl) => {
      if (!formEl) return;
      await formEl.validate(async (valid, fields) => {
        if (valid) {
          try {
            if (!data.enterpriseInfo.blPhoto) {
              throw "请上传营业执照图片";
            }
            if (!data.enterpriseInfo.legalFacePhoto) {
              throw "请上传法人身份证正面图片";
            }
            if (!data.enterpriseInfo.legalBackPhoto) {
              throw "法人身份证反面图片";
            }
            if (!data.enterpriseInfo.linkFacePhoto) {
              throw "联系人身份证正面图片";
            }
            if (!data.enterpriseInfo.linkBackPhoto) {
              throw "联系人身份证反面图片";
            }
            
            if (!data.checkArgee) {
              throw "请勾选《保证承诺书协议》";
            }
          add(data.enterpriseInfo);
          } catch (err) {
            ElMessage({
              type: "warning",
              message: err,
            });
          }
        }
      });
    };
    //今天之前的时间可选
    const startDate = (time) => {
      if (time.getTime() > Date.now() - 8.64e7) {
        return true;
      } else {
        return false;
      }
    };

    // 今天之后的时间可选
    const finshDate = (time) => {
      if (time.getTime() < Date.now() - 8.64e7) {
        return true;
      } else {
        return false;
      }
    };

    return {
      ...toRefs(data),
      startDate,
      finshDate,
      enterpriseRegisterSubmit,
      blImage,
      legalFaceImage,
      legalBackImage,
      linkFaceImage,
      linkBackImage,
    };
  },
};
</script>

<style  >
.el-input__wrapper {
  border-bottom: 1px solid #c8c8c8;
  border-radius: 0;
  box-shadow: 0 0 0 0 !important;
}
</style>


<style  >
.form {
  margin: 0 auto;
  width: 900px;
  height: 1500px;
  background-color: #fff;
  padding: 0 50px;
}

.form-title {
  font-size: 24px;
  text-align: center;
  padding: 40px;
  color: #2d8cf0;
  font-weight: 800;
}

.form-context {
  display: inline;
}
.radio-right {
  margin-right: 18px;
}

.el-divider--vertical {
  border-left: 3px #409eff var(--el-border-style);
  margin: 0 0;
}

.images {
  display: inline-block;
  padding: 0 calc((100% - 890px) / 10);
}

.images span {
  color: #515a6e;
  font-size: 14px;
  margin-top: 10px;
}

.imageDistance {
  margin: 5px 0 20px 0;
}

.iconColor {
  color: red;
}

.el-select {
  --el-select-input-focus-border-color: none;
}

.el-form-item__label {
  color: #515a6e;
  padding: 0 10px 0 0;
}

.el-form-item--small {
  --font-size: 13px;
}

.el-form--inline .el-form-item {
  margin-right: 0px;
  margin-left: 30px;
}

.el-input--small .el-input__wrapper {
  padding: 0 7px;
}

.submit {
  height: 40px;
  width: 300px;
  background: #409eff;
  border-radius: 15px;
  margin-bottom: 10px;
  margin-top: 30px;
  align-items: center;
}



.el-form-item__content > .el-form-item__error {
  font-size: 14px !important;
  left: 4%;
}
</style> 